@import './variables';

html body {
  font-family: "Source Han Sans CN", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  outline: none;
}

//主体容器
.vab-layout-vertical {
  height: 100%;
  background: url('~@/assets/com/image/container-bg.jpg') no-repeat right top;
  background-size: calc(100% - #{$base-left-menu-width}) auto;

  transition: $base-transition;

  &.collapse-layout {
    background-size: calc(100% - #{$base-left-menu-width-min}) auto;
  }

  //页头
  .vab-nav {
    background: none;
    box-shadow: none;
    border-bottom: 1px solid $base-color-grayD;
  }

  //主内容
  .vab-main {
    height: 100%;

    .vab-app-main {
      overflow: unset !important;
      height: 100%;

      > section {
        height: 100%;
        overflow: auto;
        box-shadow: 5px 5px 20px $base-color-grayE;
        border-radius: 0 16px 16px;
      }
    }
  }
}

//抽屉
.el-drawer {
  min-width: 400px;
  max-width: 600px;

  .el-drawer__header {
    font-size: $base-font-size-big;
    color: $base-font-color-main;
    font-weight: bold;
    padding: 30px 30px;
    margin-bottom: 0;
  }
}

//上传图标
.el-upload:hover i {
  color: $base-font-icon-hover;
  border-color: $base-font-upload-border;

  div {
    color: #a5a9b0;
  }
}

.el-upload-dragger:hover i {
  color: #3e9cfb;
  border-color: $base-font-upload-border;
}

.el-popover__reference-wrapper .select-sys.select-sys:hover i.ri-file-search-fill {
  border-color: $base-font-upload-border;
  color: $base-font-icon-hover;
}

//dialog弹框
.el-dialog {
  overflow: hidden;
  border-radius: 10px;

  .el-dialog__header {
    height: 60px;
    font-weight: bold;
    background-color: $base-color-background;
    padding: 20px 30px;

    .el-dialog__title {
      padding-left: 10px;
      border-left: 4px solid $base-color-orange;

      span {
        color: $base-font-color-main;
      }
    }

    button {
      top: 20px;

      i {
        font-size: 20px;
        font-weight: bold;
        color: $base-font-color-secondary;
      }
    }
  }

  .el-dialog__body {
    padding: 30px;
    text-align: left;
  }

  .el-dialog__footer {
    padding: 0 40px 40px;
  }
}

//确认消息弹框
.el-message-box {
  width: 500px;
  height: 260px;
  padding: 0;
  border-radius: 10px;

  .el-message-box__header {
    height: 60px;
    font-weight: bold;
    background-color: $base-color-background;
    padding: 20px 30px;

    .el-message-box__title {
      padding-left: 10px;
      border-left: 4px solid $base-color-orange;

      span {
        color: $base-font-color-main;
      }
    }

    button {
      top: 20px;

      i {
        font-size: 20px;
        font-weight: bold;
        color: $base-font-color-secondary;
      }
    }
  }

  .el-message-box__btns {
    padding: 40px;
    transform: translateY(30px);
  }

  .el-message-box__content {
    padding: 30px 0 0 40px;

    .el-message-box__status {
      font-size: $base-font-size-bigger !important;
    }

    .el-message-box__message {
      padding-left: 30px;
    }
  }
}

//按钮
.el-button {
  border-radius: 6px;
}

.el-button.el-button--medium {
  min-width: 88px;
  height: 36px;
  font-size: $base-font-size-default;
}

.el-button.el-button--small {
  min-width: 80px;
  height: 34px;
  font-size: $base-font-size-small;
}

.el-button.el-button--mini {
  min-width: 72px;
  height: 28px;
  font-size: $base-font-size-small;
}

.el-button.el-button--default.el-button--primary, .el-button--primary {
  background-color: $base-button-default;
  border-color: $base-button-default;
  color: $base-color-white;
}

.el-button--primary:hover,
.el-button.el-button--default.el-button--primary:hover {
  background-color: $base-button-hover;
  border: 1px solid $base-button-hover;
}

.el-button--primary:active,
.el-button.el-button--default.el-button--primary:active {
  background-color: $base-color-blue;
}

.btn-custom-cancel {
  color: $base-button-default;
  border: 1px solid $base-button-default;
}

.btn-custom-cancel:hover {
  border: 1px solid $base-button-default;
}

.btn-custom-cancel:active {
  background-color: $base-color-blue;
  color: $base-color-white;
}

.el-button--primary.is-plain {
  border: 1px solid $base-button-default;
  background-color: $base-color-white;
}

.el-button--primary.is-plain:hover {
  background-color: #eaf3fc;
  color: $base-button-default;
  border: 1px solid $base-button-default;
}

.el-button--primary.is-plain:active {
  background-color: $base-color-blue;
  color: $base-color-white;
}

.el-button--danger.is-plain {
  background: $base-color-white;
}

.el-button--danger.is-plain:hover {
  background: #fef0f0;
  border-color: #fbc4c4;
  color: $base-color-red;
}

.el-button--danger.is-plain:active {
  background: $base-color-red;
  color: $base-color-white;
}

.el-button--default {
  color: $base-button-default;
  border: 1px solid $base-button-default;
}

.el-button--default:hover {
  background-color: #eaf3fc;
  border: 1px solid $base-button-default;
}

.el-button--default:active {
  background-color: $base-color-blue;
  color: $base-color-white;
}

.el-button--danger {
  background-color: $base-color-red;
}

html body[class*=vab-theme-] .el-button [class*=el-icon-] + span {
  margin-left: 5px;
}
.iconfont span{
    margin-left: 5px;
}
html body[class*=vab-theme-] .el-button [class*=el-icon-] {
  font-size: $base-font-size-default;
}

//气泡提示
.el-tooltip.el-icon-info.item {
  position: absolute;
  right: -20px;
  top: 40px;
  color: #c0c4cc;
}

.el-tooltip__popper.is-dark {
  background-color: $base-color-background;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  padding: 6.5px 10px;

  .popper__arrow {
    border-top-color: #f5f5f5;
  }
}

.el-tooltip__popper[x-placement^=top] .popper__arrow::after {
  border-top-color: $base-color-background;
}

//表单
.el-form {
  .el-form-item {
    margin-bottom: 20px;

    &.el-form-item--small {
      margin-bottom: 30px;
    }
  }
}

//输入框
.el-input {
  .el-input__inner {
    height: 40px;
    border-radius: 6px;
    padding: 0 12px;
  }
}

.el-input--small .el-input__icon {
  line-height: 40px;
}

.el-input__inner:focus {
  border-color: #389cff;
}

.el-form-item.is-error .el-input__inner {
  border-color: #f66c6c;
}

.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background-color: #f1faff;
}

.el-select {
  width: 100%;
}

.el-date-editor.el-input {
  width: 100%;
}

.el-input__prefix {
  left: 10px;
}

.el-input__suffix {
  right: 10px;
}

.el-input--prefix .el-input__inner {
  text-indent: 24px;
}

.el-textarea__inner {
  border-radius: 6px;
}

//特殊提示
.el-message {
  .el-message__content {
    color: $base-font-color-secondary;
  }
}

// 分页
html body[class*=vab-theme-] .el-pagination {
  text-align: right;

  .el-select .el-input {
    width: 86px;
  }

  .el-pagination__editor.el-input {
    width: 44px;
  }
}

// 表格
html body[class*=vab-theme-] .el-table {
  th {
    height: 60px;
    background: $base-color-background;

    &.is-sortable .cell {
      padding-right: 35px;
    }

    .cell {
      font-weight: bold;
      font-size: 15px;

      .caret-wrapper {
        transform: scale(1.3);
        position: absolute;
        right: 10px;
        margin: auto;
        top: 0;
        bottom: 0;
      }
    }
  }

  &.el-table--small td {
    height: 50px
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: $table-hover-background;
  }

  .el-table__body tr.el-table__row--striped td {
    background-color: $base-color-background;
  }

  .el-table__body tr.row-selected > td {
    background-color: $table-select-background;
  }

  .iconfont {
    color: $base-button-default;
    cursor: pointer;
    margin-right: 20px;
    font-size: 16px;
    &.table-icon-red {
      color: $base-color-orange;
    }
  }
}

//表头排序三角形
.el-table .sort-caret.ascending {
  border-bottom-color: $base-font-color-secondary;
}

.el-table .sort-caret.descending {
  border-top-color: $base-font-color-secondary;
}

/*tree树*/
.el-tree-node__content {
  height: 36px;
  line-height: 36px;
  margin-bottom: 4px;

  .tree-slot {
    padding: 0 20px 0 6px;
    border-radius: 6px;
    transition: $base-transition;
    font-size: 15px;
    flex: 1;

    i {
      color: $base-color-orange;
      font-size: 17px;
      transition: $base-transition
    }
  }
}

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content,
.el-tree-node__content:hover,
.el-tree-node__content:active,
.el-tree-node:focus > .el-tree-node__content {
  background: none;
}

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content, .el-tree-node__content:hover {
  .tree-slot {
    background: $base-button-default;
    color: #fff;

    i {
      color: #fff
    }
  }
}

.el-tree-node__content > .el-tree-node__expand-icon {
  font-size: 22px;
  padding: 0;
  color: $base-color-gray9e;

  &.is-leaf {
    color: transparent;
  }
}

.el-tabs__item:focus.is-active.is-focus:not(:active) {
  box-shadow: none;
}
